<template>
    <div class="friends_list">
       <div v-for="(item,index) in frineds_list" :key="item.room_info.room_id">
            <LIST_ITEM    :item="item" :key="index" >
            </LIST_ITEM>
       </div>
      
    </div> 
     
</template>

<script setup>
import { inject, onMounted, ref ,watch,computed} from 'vue'
import { get_user_FriendList } from "@/api/chat/room.js"
import LIST_ITEM from './item.vue'
const user = inject('user')()
const chat = inject('chat')()
let frineds_list = ref([])
const middledata = computed(() => { 
    return chat.value.get_friend_list() || null
})

watch(() => middledata.value, (newValue) => { 
    frineds_list.value=newValue
})


onMounted(async () => {
   
    if ((Object.keys(chat.value.get_friend_list()?.keys()).length) == 0 &&
        (user.value?.get_user()?.friends_count != undefined && user.value?.get_user()?.friends_count != 0)) {
        const userlist = await get_user_FriendList(user.value?.get_user()?.id)
        if (userlist !== undefined) { 
              chat.value.set_friend_list(userlist)
              frineds_list.value = userlist
        }
    } else { 
        frineds_list.value = chat.value.get_friend_list()
    }
    // 队友好友的信息采用存储方案,直接进行存储
    // 测试数据
    const test = [
        {
            friend_info: {
                id: "1",
                username: "name",
                age: "18",
                sex: "男",
                email: "123@qq.com",
                introduction: "introduction",
                head_image: "/public/4.jpg",
                type: "friend"
            },
            room_info: {
                room_id: 1,
                created_At: "2023-01-01",
                one: 1,
                another: 2,
                }
 
        },
 {
            friend_info: {
                id: "2",
                username: "name",
                age: "18",
                sex: "男",
                email: "123@qq.com",
                introduction: "introduction",
                head_image: "/public/4.jpg",
                type: "friend"
            },
            room_info: {
                room_id: 2,
                created_At: "2023-01-01",
                one: 1,
                another: 2,
                }
 
},
       
]
})

</script>

<style scoped>
.friends_list{
    width: 100%;
    position: relative;
    z-index: 100;
}


</style>